import React from "react";

const ProductList = ({onDel, toEdit, toDetail, productList}) => {
    //构建行数据
    let rows = [];

    if (productList && productList.length) {
        productList.forEach((val, idx, ary) => {
            val = val || {};
            rows.push(
                <tr key={idx}>
                    <td>{idx + 1}</td>
                    <td>{val.name}</td>
                    <td>{val.price}</td>
                    <td>
                        <button onClick={() => toDetail(val.id)}>查看</button>
                        <button onClick={() => toEdit(val.id)}>编辑</button>
                        <button onClick={() => onDel(val.id)}>删除</button>
                    </td>
                </tr>);
        });
    }

    return (
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {rows}
            </tbody>
        </table>
    );
}

export default ProductList;